<template>
  <div class="container">
    <default-header></default-header>
    <div>
      <img
        src="../../assets/img/home/76118205@2x.png"
        alt=""
        style="width: 100%"
      />
    </div>
    <div class="width1080 margin0auto">
      <h1 class="tac pt40">案例展示</h1>
      <p class="line tac fs16 color_666 mt10 pb40">
        只为了让您的影片品质更可控，只为了让您享受一站式影视创作服务。
      </p>
      <ul class="oh pb20">
        <li
          v-for="(data, idx) in news.data"
          :key="idx"
          class="fl"
          :class="{ ml30: idx % 3 > 0, mt20: idx > 2 }"
        >
          <a :href="'/home/news/detail?id=' + data.id">
            <img :src="data.thumb" alt="" />
            <p class="fs14 color_fff pl15">{{ data.name }}</p>
          </a>
        </li>
      </ul>
      <default-page :query="query" :page="news"></default-page>
    </div>
    <default-footer class="mt20"></default-footer>
  </div>
</template>

<script>
import DefaultHeader from "../../components/default-header";
import DefaultFooter from "../../components/default-footer";
import DefaultPage from "../../components/default-page";
export default {
  components: { DefaultPage, DefaultFooter, DefaultHeader },
  mixins: [],
  head() {
    return {
      title: this.cate.seo_title || this.cate.name || "优秀的案例"
    };
  },
  async asyncData({ query, route, app }) {
    const path = route.path;
    const cate = await app.$cateService.detail(null, "detail", path, true);
    const news = await app.$newsService.list({
      cate_id: cate.id,
      pageSize: 9,
      pageNum: (query && query.p) || 1,
      cache: true
    });
    return {
      query,
      cate,
      news
    };
  }
};
</script>
<style scoped lang="scss">
ul {
  li,
  img {
    width: 340px;
    height: 225px;
  }
  li {
    position: relative;
    p {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 40px;
      line-height: 40px;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
